import { defineComponent, onMounted, reactive, ref } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import LTable from "@/components/public/lTable/lTable";
import channelListService from "@/modules/channelManagement/channelList.service";
export default defineComponent({
  name: 'channelListPage',
  setup() {
    const state = reactive({
      toolbar: {
        left: ["refresh",],
        right: ["filter", "search"],
      },
      dataSource: [],
      columns: [
        {
          title: "编号",
          dataIndex: "id",
          key: "id",
          align: "center",
          width: "50px",
        },
        {
          title: "登录名",
          dataIndex: "login_name",
          align: "center",
          width: "200px",
        },
        {
          title: "常用联系人",
          dataIndex: "realname",
          align: "center",
          width: "150px",
        },
        {
          title: "手机号",
          dataIndex: "mobile",
          align: "center",
          width: "150px",
        },
      ],
      loading: false,
      searchForm: {
        menu_name: {
          type: "input",
          label: "一级渠道名称",
          attrs: { placeholder: "一级渠道名称" },
        },
        status: {
          type: "select",
          label: "状态",
          attrs: { placeholder: "状态" },
          datas: [{ label: '正常', value: "1" }, { label: '停用', value: "0" }],
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    } as any);
    const LTableRef = ref(null as any);

    const $service = new channelListService();

    return () => (
      <Page>
        <CardWithTitle title="渠道列表">
          <LTable
            ref={LTableRef}
            toolbar={state.toolbar}
            service={$service}
            v-model={state}
          >
            <a-table
              bordered={true}
              scroll={{ x: "max-content" }}
              dataSource={state.dataSource}
              columns={state.columns}
              pagination={state.pagination}
              loading={state.loading}
            />
          </LTable>
        </CardWithTitle>
      </Page>
    )
  }
})